<template>
  <div class="login container">
    <Header> </Header>
    <section>
      <form action="">
        <div class="login-tel">
          <input type="tel" v-model="userTel" placeholder="请输入手机号..." />
        </div>
        <div class="login-tel">
          <input type="password" v-model="userPwd" placeholder="请输入密码" />
        </div>
        <div class="login-btn" @click="login">登录</div>
        <div class="tab">
          <span @click="goLogin">短信登录</span>
          <span @click="goRecovery">找回密码</span>
          <span @click="goRegister">快速注册</span>
        </div>
      </form>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/views/login/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
import http from '@/common/api/request';
import {mapMutations} from 'vuex';
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
        userTel:'',//用户输入
        userPwd:'',
      //验证规则
      rules: {
        userTel: {
          rule: /^1[23456789]\d{9}$/,
          msg: "手机号不能为空,并且是11位",
        },
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空,并且要求6-12位",
        },
      },
    };
  },
  components: {
    Header,
    Tabbar,
  },
  methods: {
    ...mapMutations(['USER_LOGIN']),
    login() {
      //前端验证
      if (!this.validate("userTel")) return;
      if (!this.validate("userPwd")) return;
      //发送请求，后端验证
      http.$axios({
        url:'/api/login',
        method:'POST',
        data:{
            userTel:this.userTel,
            userPwd:this.userPwd
        }
      }).then(res=>{
        //提示信息
        Toast(res.msg);
        //登陆失败
        if(!res.success) return; 
        //登陆成功 ==》跳转页面,存储用户信息
        this.USER_LOGIN(res.data);

        this.$router.replace('/my');
      })
    },
    goLogin() {
      this.$router.push("/login");
    },
    goRegister() {
      this.$router.push("/register");
    },
    goRecovery() {
      this.$router.push("/recovery");
    },
    //验证信息提示
    validate(key) {
        let bool = true;
        if (!this.rules[key].rule.test(this[key])){
            Toast(this.rules[key].msg);
            bool = false;
            return false
        }
        return bool
    },
  },
};
</script>

<style lang="scss" scoped>
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .4rem;
  background-color: #f5f5f5;
  div {
    margin: 0.2667rem 0;
    width: 8.9333rem;
    height: 1.1733rem;
  }
  input {
    box-sizing: border-box;
    padding: 0 0.2667rem;
    line-height: 1.1733rem;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0.16rem;
  }
  .login-tel {
    margin-top: 0.8rem;
    input {
      width: 100%;
    }
  }
  .login-code {
    display: flex;
    input {
      flex: 1;
    }
    button {
      padding: 0 0.5333rem;
      line-height: 1.1733rem;
      color: #fff;
      background-color: #b0352f;
      border: none;
      border-radius: 0.16rem;
    }
  }
  .login-btn {
    line-height: 1.1733rem;
    text-align: center;
    color: #fff;
    background-color: #b0352f;
    border-radius: 0.16rem;
  }
  .tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 0.3733rem;
    }
  }
}
</style>
